﻿<!DOCTYPE html>
<html ng-app="todoApp">
<head>
    <title>TODO List</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="scripts/angular.min.js"></script>
    <script>
        var model = {
            user: "Jerry",
            items: [
                    { "action": "编写方案文档", done: false },
                    { "action": "面试技术人员", done: false },
                    { "action": "向老板汇报", done: true },
                    { "action": "召开部门会议", done: false }]
        };
        var todoApp = angular.module('todoApp', []);

        todoApp.controller("ToDoCtrl", function ($scope) {
            $scope.todo = model;

            $scope.viewFile = function () {
                return $scope.showList ? "02ng-include-list.html" : "02ng-include-table.html";
            };

            $scope.reportChange = function () {
                console.log("视图页面: " + $scope.viewFile());
            }
        });
    </script>
    <style>
        .odd {
            background-color: lightcoral;
        }

        .even {
            background-color: lavenderblush;
        }
    </style>
</head>
<body ng-controller="ToDoCtrl">
    <div class="container">
        <div class="page-header">
            <h1>
                {{todo.user}}的待办事务列表
            </h1>
        </div>
        <div class="well">
            <div class="checkbox">
                <label>
                    <input type="checkbox" ng-model="showList">列表视图
                </label>
            </div>
        </div>
        <div>
            <ng-include src="viewFile()" onload="reportChange()"></ng-include>
        </div>
    </div>
</body>
</html>
